<template>
  <v-chart ref="vChartRef" :option="option" autoresize></v-chart>
</template>

<script>
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import { graphic } from "echarts";

import {
  DatasetComponent,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
} from "echarts/components";
use([
  DatasetComponent,
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
]);

export default {
  components: {
    VChart,
  },
  data() {
    return {
      option: {
        backgroundColor: "rgba(0, 0, 0, 0)",
        grid: {
          left: "3%",
          right: "3%",
          bottom: "6%",
          top: "0%",
          containLabel: true,
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            show: true,
            type: "shadow",
          },
        },
        legend: {
          top: "bottom",
          left: "center",
          type: "scroll",
          textStyle: {},
        },
        xAxis: [
          {
            show: true,
            type: "category",
            data: [],
            axisLabel: {
              inside: false,
              textStyle: {
                align: "center",
              },
            },
          },
          {
            type: "category",
            show: false,
            data: ["2", "3"],
          },
        ],
        yAxis: [
          {
            show: true,
            type: "value",
            position: "right",
            axisLabel: {
              inside: false,
              margin: 0,
              padding: [0, 10, 0, 10],

              textStyle: {
                align: "left",
              },
              formatter: function (val) {
                return val + "%";
              },
            },
            splitLine: {
              lineStyle: {
                color: "#888",
                type: "solid",
              },
            },
          },
          {
            type: "value",
            position: "left",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              inside: false,
              margin: 0,
              padding: [0, 10, 0, 0],
              textStyle: {
                align: "right",
              },
            },
          },
        ],
        series: [],
      },
    };
  },
  methods: {
    setData(data) {
      const series = [];
      const getSeries = (data) => {
        return {
          name: data.name,
          type: "bar",
          data: data.data,
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              color: data.color,
            },
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        };
      };
      const getLineSeries = (data) => {
        return {
          name: data.name,
          type: "line",
          data: data.data,
          yAxisIndex: 0,
          itemStyle: {
            normal: {
              color: data.color,
            },

            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        };
      };
      data.data.bar.forEach((item) => {
        series.push(getSeries(item));
      });
      data.data.line.forEach((item) => {
        series.push(getLineSeries(item));
      });
      this.option = {
        legend: {
          top: "top",
          left: "center",
          type: "scroll",
          textStyle: {},
        },

        grid: {
          left: "3%",
          right: "3%",
          bottom: "0%",
          top: "12%",
          containLabel: true,
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            show: true,
            type: "shadow",
          },
        },
        xAxis: {
          show: true,
          type: "category",
          data: data.xAxis,
          axisLabel: {
            inside: false,
            textStyle: {
              align: "center",
            },
          },
        },
        yAxis: [
          {
            show: true,
            type: "value",
            position: "right",
            axisLabel: {
              inside: false,
              margin: 0,
              padding: [0, 10, 0, 10],
              textStyle: {
                align: "left",
              },
              formatter: function (val) {
                return val + "%";
              },
            },
            splitLine: {
              lineStyle: {
                color: "#888",
                type: "dashed",
              },
            },
          },
          {
            type: "value",
            position: "left",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              inside: false,
              margin: 0,
              padding: [0, 10, 0, 0],
              textStyle: {
                align: "right",
              },
            },
          },
        ],
        backgroundColor: "#ffffff",
        series: series,
      };
    },
  },
};
</script>
